<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="page banner">
          <img class="xh" :src="require('../assets/imgs/banner.png')" alt="">
          <div class="vqa">
            <img :src="require('../assets/imgs/banner-vqa.png')" alt="">
            <img :src="require('../assets/imgs/banner-vqa-txt.png')" alt="">
          </div>
          <ul class="judge">
            <li>智能 95%</li>
            <li>精准 98%</li>
            <li>
              决策
              <span></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  import '../../node_modules/swiper/css/swiper.min.css';

  export default {
    name: 'Carousel',
    mounted() {
      /* eslint-disable no-new */
      new Swiper('.swiper-container', {
        direction: 'horizontal', // 横向切换选项
        loop: true // 循环模式选项
        // autoplay:true,
        // 如果需要分页器
        // pagination: {
        //   el: '.swiper-pagination'
        // },
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev'
        // }
      });
    }
  };
</script>

<style lang="less">

  .swiper-container {
    width: 100%;
    height: 70%;
    background-color: #301C7F;
  }

  .banner {
    img.xh {
      height: 100%;
    }

    .vqa {
      position: absolute;
      left: 15%;
      text-align: center;
      img {
        display: block;
        &:nth-child(2) {
          position: relative;
          left: 20px;
          margin-top: 15px;
        }
      }
    }

    .judge {
      position: absolute;
      bottom: 200px;
      right: 30%;
      font-size: 20px;
      li {
        span {
          display: inline-block;
          width: 51px;
          height: 10px;
          background-image: url("../assets/imgs/star.png");
          background-position: center;
          background-size: contain;
        }

        &:last-child {
          padding-left: 12px;
        }
      }
    }
  }

  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    height: 100%;
  }

  .page > h2 {
    font-size: 35px;
    font-weight: normal;
  }

  .page > h2:not(:first-child) {
    margin-top: 30px;
  }

  .page > .subscrip {
    display: flex;
    width: 600px;
    margin-top: 30px;
  }

  .page > .subscrip > h1 {
    flex: 1;
    font-size: 50px;
  }

  .page > .subscrip > h1:nth-child(1) {
    text-align: right;
  }

  .page > .subscrip > h1:nth-child(2) {
    text-align: center;
  }

  .page > .subscrip > h1:nth-child(3) {
    text-align: left;
  }

  video {
    width: 100%;
    height: 100%;
  }
</style>
